<template>
    <div>
      <el-card class="box-card">
        <div slot="header">
          <!-- 根据日期查询 -->
          <el-form ref="form" :model="serachForm" label-width="80px">
            <el-form-item label="预约日期">
              <el-date-picker
                  v-model="serachForm.pickerValue"
                  type="date"
                  placeholder="选择日期"
                  :default-value="defaultValue"
                  @change="handlePikerChange"
                  :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
            <!-- 根据时间段查询 -->
            <el-form-item label="时间段">
              <el-radio-group v-model="serachForm.currentRadioId" @change="searchList" size="small">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button
                  border
                  :label="ts.id"
                  v-for="(ts, index) in serachForm.radio"
                  :key="index"
                >
                {{ts.timeSlotName}}（{{ts.startTime}}-{{ts.endTime}}）
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 主体部分表格 -->
        <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                label="编号"
                width="68">
                <template slot-scope="scope">
                  {{scope.$index + 1}}
                </template>
              </el-table-column>

              <el-table-column
                prop="name"
                label="实验室名称"
                width="180"
              >
              </el-table-column>
              
              <el-table-column
                label="日期"
                >
                <template slot-scope="scope">
                  {{scope.row.day}}
                </template>
              </el-table-column>

              <el-table-column
                label="时间段"
                >
                <template slot-scope="scope">
                  {{scope.row.timeSlotName}}
                  <div>{{scope.row.startTime}} —— {{scope.row.endTime}}</div>
                </template>
              </el-table-column>

              <el-table-column
                label="已排课"
                >
                <template slot-scope="scope">
                  <div v-if="scope.row.type"><el-tag type="success"><i class="el-icon-check"/></el-tag></div>
                  <div v-else><el-button type="text" icon="el-icon-success" circle></el-button></div>
                </template>
              </el-table-column>

              <el-table-column
                label="已预约人数"
                width="98">
                <template slot-scope="scope">
                  <div v-if="scope.row.type">-</div>
                  <div v-else>
                    <router-link class="link-type" :to="'/lab/withUser/'+scope.row.id">
                      <el-button type="text">{{scope.row.appointmentNum}}</el-button>
                    </router-link>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                label="剩余可预约人数">
                <template slot-scope="scope">
                  <div v-if="scope.row.type">-</div>
                  <div v-else>
                    <strong>{{scope.row.maxNumber - scope.row.appointmentNum}} </strong>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <div v-if="scope.row.type == 1">
                    <router-link class="link-type" :to="'/lab/withTeacher/'+scope.row.id">
                      <el-button type="text">排课详情</el-button>
                    </router-link>
                  </div>
                  <div v-else>
                    <router-link class="link-type" :to="'/lab/withUser/'+scope.row.id">
                      <el-button type="text">预约详情</el-button>
                    </router-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <br>
        <!-- 底部翻页器 -->
        <div class="pagination">
          <el-pagination
              background
              layout="total, prev, pager, next, jumper"
              :pager-count="5"
              :total="page.total"
              :page-size="page.pageSize"
              :current-page="page.currentPage"
              @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
</template>
<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      pickerOptions1: { // 当前时间日期选择器特有的选项参考下表
        // disabledDate(time) {
        //   return time.getTime() + 3600 * 1000 * 24 < Date.now()
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            console.log('aaaa', picker)
            picker.$emit('pick', new Date()) // 设置选择器的值
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      defaultValue: Date.now(),
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 10
      },
      serachForm: {
        pickerValue: '',
        pickerDay: '',
        currentRadioId: '',
        radio: []
      }
    }
  },
  mounted() {
    this.getList()
    // 获取时间段
    request.get('/items/labTimerSlot').then(res => {
      this.serachForm.radio = res.content
    })
  },
  methods: {
    // 分页器函数
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    // 获取时间yyyy-mm-dd
    handlePikerChange() {
      if (this.serachForm.pickerValue == null) {
        this.serachForm.pickerDay = ''
      } else {
        var y = this.serachForm.pickerValue.getFullYear()
        var m = this.serachForm.pickerValue.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = this.serachForm.pickerValue.getDate()
        d = d < 10 ? ('0' + d) : d
        this.serachForm.pickerDay = y + '-' + m + '-' + d
      }
      this.getList()
    },
    // 获取实验室列表
    getList() {
      request.get('items/labAppointmentCondition', { params: {
        size: this.page.pageSize,
        current: this.page.currentPage,
        day: this.serachForm.pickerDay,
        timeSlotId: this.serachForm.currentRadioId
      }}).then(res => {
        this.tableData = res.content.records
        this.page.total = res.content.total
      })
    },
    // 根据一定条件搜索查询列表
    searchList(labelId) {
      this.serachForm.currentRadioId = labelId
      this.page.currentPage = 1
      this.getList()
    }
  }
}
</script>

<style scoped>
.buttonGroup {
    float: left;
}
.inputGroup {
    float: right;
}
.pagination {
  float: right;
  margin-bottom: 15px;
}
</style>
